<template>
  <view class="my-wrap">
    <view class="top">
      <view class="left" @tap="goMyInfo">
        <image :src="avatarUrl" v-if="avatarUrl"></image>
        <view class="txt">
          <text class="avatar-txt">{{ nickName }}</text>
          <text class="phone-txt">{{ mobile }}</text>
        </view>
      </view>
      <view class="right">
        <QRCode text='world' size={300} scale={4} errorCorrectLevel='M' typeNumber={2} />
        <view class="my-canvas" @tap="handleModal">
          <canvas v-show="!qrcodeSrc" canvasId="qrcode" style="width: 30PX;height:30PX;" />
          <image v-show="qrcodeSrc" :src="qrcodeSrc" style="width: 30PX;height:30PX;" />
        </view>
        <view @tap="goMyInfo" class="iconfont icon-youjiantou-white"></view>
      </view>
    </view>
    <view class="center"></view>
    <view class="list">
      <view class="ul">
        <view class="li" @tap="goHref('healthCard')">
          <view class="left">
            <view class="iconfont icon-jiankangzheng"></view>
            <view class="txt">我的健康证<strong></strong></view>
          </view>
          <view class="iconfont icon-jiantou-youce right"></view>
        </view>
        <view class="li" @tap="goHref('mySwimTicket')">
          <view class="left">
            <view class="iconfont icon-yongpiao"></view>
            <view class="txt">我的泳票<strong></strong></view>
          </view>
          <view class="iconfont icon-jiantou-youce right"></view>
          <!--          <u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>-->
        </view>
        <view class="li" @tap="goHref('carryUserList')">
          <view class="left">
            <view class="iconfont icon-xiexingyonghu"></view>
            <view class="txt">携行用户<strong></strong></view>
          </view>
          <view class="iconfont icon-jiantou-youce right"></view>
          <!--          <u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>-->
        </view>
        <view class="li" @tap="goHref('entryRecord')">
          <view class="left">
            <view class="iconfont icon-ruchangjilu"></view>
            <view class="txt">入场记录<strong></strong></view>
          </view>
          <view class="iconfont icon-jiantou-youce right"></view>
          <!--          <u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>-->
        </view>
        <view class="li" @tap="goHref('myInfo')">
          <view class="left">
            <view class="iconfont icon-ruchangjilu"></view>
            <view class="txt">账户设置<strong></strong></view>
          </view>
          <view class="iconfont icon-jiantou-youce right"></view>
          <!--          <u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>-->
        </view>
        <view class="li" @tap="goHref('message')">
          <view class="left">
            <view class="iconfont icon-ruchangjilu"></view>
            <view class="txt">我的消息<strong></strong></view>
          </view>
          <view class="iconfont icon-jiantou-youce right"></view>
          <!--          <u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>-->
        </view>
        <view class="li" @tap="goHref('orderList')">
          <view class="left">
            <view class="iconfont icon-ruchangjilu"></view>
            <view class="txt">我的订单<strong></strong></view>
          </view>
          <view class="iconfont icon-jiantou-youce right"></view>
          <!--          <u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>-->
        </view>
      </view>
    </view>
    <h-toast></h-toast>
    <h-dialog :showClose="false" :maskClose="true" width="200PX" height="200PX" v-model="modalShow">
      <view class="my-modal">
        <canvas canvasId="qrcode-modal" style="width: 200PX;height:200PX;" />
      </view>

    </h-dialog>
  </view>
</template>

<script>
  import Taro from '@tarojs/taro'
  import CodeCreator from 'taro-code-creator'
  import uQRCode from '../../common/utils/uqrcode.js'
  // import uQRCode from '@/common/uqrcode.js'
  export default {
    data() {
      return {
        avatarUrl: '',
        nickName: '',
        mobile: '',
        qrcodeText: 'uQRCode',
        qrcodeSize: 30,
        qrcodeSrc: '',
        modalShow: false,
        height: 'auto'
      }
    },
    onShow() {
      this.initUser()
    },
    mounted() {
      this.getQrcode()
    },
    methods: {
      initUser() {
        this.avatarUrl = Taro.getStorageSync('avatarUrl');
        //this.avatarUrl = Taro.getStorageSync('avatarUrl') || require('@/static/img/default-avatar.png');
        let _nickName = Taro.getStorageSync('nickName');
        let _mobile = Taro.getStorageSync('mobile');
        if (_mobile == '') {
          this.nickName = '您还没有登录'
          this.mobile = '登录享受更多精彩服务~'
        } else if (_mobile != '' && _nickName == '') {
          this.nickName = '昵称'
          this.mobile = Taro.getStorageSync('mobile')
        } else if (_mobile != '' && _nickName != '') {
          this.nickName = Taro.getStorageSync('nickName')
          this.mobile = Taro.getStorageSync('mobile')
        }


      },
      goMyInfo() {
        let user_id = Taro.getStorageSync('user_id')
        if (!user_id) {
          Taro.hToast({
            message: '请先绑定手机号'
          })
          setTimeout(() => {
            Taro.navigateTo({
              url: '/pages/loginPhone/index',
            })
          }, 1000)
        } else {
          Taro.navigateTo({
            url: '/pages/myInfo/index',
          })
        }
      },
      goHref(txt) {
        let user_id = Taro.getStorageSync('user_id')
        if (!user_id) {
          Taro.hToast({
            message: '请先绑定手机号'
          })
          setTimeout(() => {
            Taro.navigateTo({
              url: '/pages/loginPhone/index',
            })
          }, 1000)
        } else {
          Taro.navigateTo({
            url: `/pages/${txt}/index`,
          })
        }
      },

      //允许转发的默认函数
      onShareAppMessage() {},

      // 生成二维码
      getQrcode() {
        uQRCode.make({
          canvasId: 'qrcode',
          text: this.qrcodeText,
          size: this.qrcodeSize,
          margin: 0,
          success: res => {
            this.qrcodeSrc = res
          },
        })
      },
      handleModal() {
        this.modalShow = true
        uQRCode.make({
          canvasId: 'qrcode-modal',
          text: this.qrcodeText,
          size: 200,
          margin: 0,
          success: res => {
            // this.qrcodeSrc  = res
          },
        })
      }
    },
    components: {}
  }
</script>

<style lang="less">
  @import url('./static/font-alibb/iconfont.css');

  .my-wrap {
    width: 100%;
    position: relative;
    height: 100vh;
    overflow-x: hidden;
    background: #f8f8f8;
    box-sizing: border-box;
    overflow-y: auto;

    .my-canvas {
      width: 60rpx;
      height: 60rpx;
    }

    .top {
      width: 100%;
      height: 240rpx;
      // background: linear-gradient(to bottom, #d5ad57, #cfb58a, #f8f8f8);
      background: linear-gradient(to bottom, #d5ad57, #cfb58a);
      padding: 0 20rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;

      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }

        .txt {
          margin-left: 20rpx;
          display: flex;
          flex-flow: column;
          justify-content: flex-start;
          align-items: flex-start;
          box-sizing: border-box;
        }

        .avatar-txt {
          // font-weight: bold;
          font-size: 32rpx;
          color: #fff;
          box-sizing: border-box;
        }

        .phone-txt {
          margin-top: 30rpx;
          font-size: 28rpx;
          color: #fff;
          box-sizing: border-box;
        }
      }

      .right {
        color: #fff;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;

        .qrcode {

          margin-right: 30rpx;
          box-sizing: border-box;
        }
      }
    }

    .center {
      box-sizing: border-box;
      width: 100%;
      height: 120rpx;
      margin: 0 auto;
      background: #252525;
      // margin-top: -180rpx;
      border-radius: 0 0 10% 10%;
      color: #fff;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 30rpx;
      box-sizing: border-box;
    }

    .list {
      width: 96%;
      border-radius: 15rpx;
      background: #fff;
      height: auto;
      margin: 0 auto;
      box-sizing: border-box;

      .ul {
        margin: 0;
        padding: 0;
        margin-top: 10rpx;
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        box-sizing: border-box;

        .li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 100rpx;
          line-height: 100rpx;
          border-bottom: 1px solid #f5f5f0;
          padding: 0 20rpx;
          box-sizing: border-box;

          .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;

            .txt {
              margin-left: 15rpx;
              box-sizing: border-box;
              // font-size: 28rpx;
            }
          }
        }
      }
    }
  }

  .my-modal {
    width: 200PX;
    height: 200PX;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
